<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>请假信息主页</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

<!--    <div class="content-header">-->

<!--        &lt;!&ndash;        <h1>学生信息</h1>&ndash;&gt;-->
<!--        &lt;!&ndash;        <div>名字:<input type="text" >科目:<input type="text" ><button>查询</button><a href="">添加学生</a></div>&ndash;&gt;-->

<!--    </div>-->



    <div class="app-container">

        <center>
            <el-button type="primary" plain @click="studentManage">学生管理</el-button>
            <el-button type="primary" plain @click="helperManage">助手管理</el-button>
            <el-button type="primary" plain @click="checkDormManage">点名管理</el-button>
            <el-button type="primary" plain @click="leaveManage">请假管理</el-button>
            <el-button type="primary" plain @click="noticeManage">通告管理</el-button>

        </center>




        <div class="box">


            <center>



                <div class="filter-container">
                    <el-input
                            placeholder="请输入学号"
                            prefix-icon="el-icon-search"
                            style="width: 220px"
                            v-model="sno"
                    >
                    </el-input>
                    <el-input
                            placeholder="请输入姓名"
                            prefix-icon="el-icon-search"
                            style="width: 220px;margin-left: 5px"
                            v-model="sname"
                    >
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="getAll">搜索</el-button>
                </div>
            </center>


            <!--stripe highlight-current-row/-->
            <el-table size="small" current-row-key="id" :data="dataList" >

                <el-table-column prop="leaveid" align="center" label="编号" hidden></el-table-column>

                <el-table-column prop="sno" align="center" label="学号"></el-table-column>

                <el-table-column prop="sname" label="名字" align="center"></el-table-column>

                <el-table-column prop="beginTime" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
                <el-table-column prop="reason" label="原因" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <center>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-sizes="[2, 5, 10, 15]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </center>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            dialogFormVisibleBorrow:false, //编辑借书表单是否可见
            sno:undefined,
            sname: undefined,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:2,//每页显示的记录数
                total:0,//总记录数
            },
            total:'',
            borrow:{
                borrowNums:'',
                id:''
            },
            one:"",
            two:"",
            three:[]
        },

        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.getAll();
        },

        methods: {
            //列表
            getAll() {
                axios.get("http://localhost:80/leaves/page",{
                    params:{
                        pageNum: this.pagination.currentPage,
                        pageSize: this.pagination.pageSize,
                        sname: this.sname,
                        sno: this.sno,
                    }
                }).then(res=>{
                    console.log(res)
                    this.dataList=res.data.data.records;
                    this.pagination.total=res.data.data.total
                    this.sno=""
                    this.sname=""

                })

            },
            handleCreate() {
                this.dialogFormVisible=true;
                this. resetForm();
            },

            handleDelete(row){
                this.$confirm('此操作将永久删除这条请假信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("http://localhost:80/leaves/del/"+row.leaveid).then((res)=>{
                        this.$message.success(res.data.msg)
                        this.getAll()
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //重置表单
            resetForm() {
                this.formData={};
            },

            //添加
            handleAdd () {
                axios.post("/student/insert",this.formData).then((res)=>{
                    if ((res.data.errMsg)!=null){
                        this.$message.error(res.data.errMsg);
                        return;
                    }else {
                        this.dialogFormVisible=false;
                        this.$message.success("添加成功");
                    }
                })

            },
            //取消
            cancel(){
                this.dialogFormVisible=false;
                this.dialogFormVisible4Edit=false;
                this.dialogFormVisibleBorrow=false;
                this.borrow.borrowNums=''
                this.borrow.borrowNums=''
                this.$message.info("当前操作取消");
            },
            handleCurrentChange(val){
                this.pagination.currentPage=val;
                this.getAll();
            },
            handleSizeChange(val){
                this.pagination.pageSize=val;
                this.getAll();
            },
            studentManage(){
                window.location.href="http://localhost:80/xu/pages/students.html"
            },
            helperManage(){
                window.location.href="http://localhost:80/wu/pages/helper.html"
            },
            checkDormManage(){
                window.location.href="http://localhost:80/wu/pages/checkDorm.html"
            },
            leaveManage(){
                window.location.href="http://localhost:80/wu/pages/leaves.html"
            },
            noticeManage(){
                window.location.href="http://localhost:80/xu/pages/board.html"
            }




        }
    })

</script>
</html>